<template>
    <div class="bod">
                <div class="ord_header">
                <h1 v-if="1==order.payStatus">已付款，可以从手机短信查看物流。</h1>
                 <h1 v-else-if="0==order.payStatus">未付款</h1>
            </div>
            <div class="addres">
                <div class="addres_header">
                <img src="../../../assets/personal/images/add-icons-active.png">收货人:{{order.consignee}} <span>{{order.mobile}}</span>
                <div class="clearfix"></div>
                </div>
                <div class="addres_footer">
                <span>收获地址：</span><p>{{order.shippingAddress}}</p>
                <div class="clearfix"></div>
                </div>
            </div>
            <img src="../../../assets/personal/images/fengexian.png" style="margin-top:15px;">
        <div class="data_list">
            <ul class="ul_li" v-for="item in shoppingOrderList" :key="item.id">
                <li>
                    <div class="ul_li_head">                    
                        <img :src="item.companyHeadimg"><h1>{{item.companyName}}</h1>
                        <div class="clearfix"></div>
                    </div>
                    <div class="ul_li_data" v-for="itemgoods in item.goodsList" :key="itemgoods.id">
                        <div class="ul_li_data_left">
                            <img :src="itemgoods.goodsThum" @click="goodeshref(itemgoods.goodsId)"> 
                        </div>
                         <div class="ul_li_data_right">
                           <p>{{itemgoods.goodsName}}</p>
                           <span>￥{{itemgoods.goodsScreenPrice |amountMin100(2)}}</span> <span>X{{itemgoods.goodsNumber}}</span>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="clearfix"></div>  
                    <div class="money">
                       <h1 v-if="item.memberPrice>0">店内优惠<span>-￥{{item.memberPrice |amountMin100(2)}}</span></h1>
                       <h1>店铺内实付款<span>￥{{item.totalPrice|amountMin100(2) }}</span></h1>
                    </div>
                     <div class="shoptel" v-if="1==type" >
                         <img src="../../../assets/personal/images/tel_bg_03.gif" >联系商家： <a class="call" style="color:#2691ff;">{{item.companyPhone}}</a>
                    </div>
                      <div class="shoptel" v-else>
                         <img src="../../../assets/personal/images/tel_bg_03.gif" >联系买家： <a class="call" style="color:#2691ff;">{{order.mobile}}</a>
                    </div>
                    <div class="Subten" v-if="1==type" style="height:114px" >
                         <button @click="aftersales_show" v-show="false">申请售后</button>
                         <button v-if="0==item.orderStatus&&1==order.payStatus" style="margin-top:22px">未发货</button>
                         <button v-else-if="0==order.payStatus&&1==type" @click="fukuanher(order.orderId,orderAmount)" style="margin-top:22px">立即付款</button>
                         <button v-else-if="1==item.orderStatus" style="margin-top:22px">确认收货</button>
                         <button v-else-if="2==item.orderStatus" style="margin-top:22px">已收货</button>                       
                         <!-- <button v-else-if="3==order.orderStatus">已退货</button> -->
                    </div>
                    <div class="Subten" v-else  style="height:114px">
                         <button @click="aftersales_show" v-show="false">申请售后</button>
                         <button v-if="0==item.orderStatus" @click="fahuo(item.id)" style="margin-top:22px">立即发货</button>
                         <button v-else-if="1==item.orderStatus" style="margin-top:22px">已发货</button>
                         <button v-else-if="2==item.orderStatus" style="margin-top:22px">已签收</button>                       
                         <!-- <button v-else-if="3==order.orderStatus">已退货</button> -->
                    </div>
                     <div class="clearfix"></div>
                </li>
            </ul>
        </div>
           <div style="padding-left:15px;background: #fff;padding-bottom: 15px;">
                        订单总额为<span style="color:red;">￥{{orderAmount |amountMin100(2)}}</span>
                    </div>
        <div class="orderdetails">
             <ul>
                 <li>订单编号:{{orderSn}}</li>
                 <li>创建时间:{{ctime | formatDateTIME}}</li>
                 <li>付款时间:{{payTime |formatDateTIME}}</li>
                 <li v-show="false">发货时间:2018-09-05 17:44:42</li>
             </ul>
        </div>       
        <div class="aftersales" @click="aftersales_show" v-show="show_style">
            <ul>
                <li @click="tuikuan">
                    申请退款<img src="../../../assets/personal/images/694485431459622997.png">
                </li>
                 <li>
                    取消
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            show_style:false,
            orderid:this.$route.query.id,
            order:[],
            shoppingOrderList:[],
            orderSn:'',
            ctime:'',
            orderAmount:'',
            payTime:'',
            type:this.$route.query.type
        }
    },
    mounted () {
        this.orderList()
    },
    methods:{
        fukuanher: function (odid, Amount) {
                // this.$router.push({ name: "paymentchoice", query: { id: odid, amount: Amount } })
                window.location = '/wap/pay_gxtscan1.html?orderid='+odid+'&ordertype=1';
         },
        goodeshref:function(iid){
           this.$router.push({ name: "Commodity_details", query: {id:iid,subid:0} })
        },
         fahuo:function(iid){//发货
               this.$http.put(this.APIURL_PREFIX + '/api/wap/updateShoppingOrder', $.param({ orderStatus: 1, id:iid})).then((response) => {
                    layer.msg("发货成功")
                     this.loadMore()
                }).catch(function (err) {
                });
            },
        aftersales_show:function(){
            this.show_style=!this.show_style
        },
        tuikuan:function(){
            this.$router.push({name:"arefund"})
        },
        orderList:function(){//订单详情 orderid:this.$route.query.id
             this.$http.get(this.APIURL_PREFIX + '/api/wap/OrderXqq', { params: { orderId: this.orderid} }).then((response) => {
               this.orderAmount=response.data.data[0].order.orderAmount
               console.log(this.orderAmount)
               this.order=response.data.data[0].order
               this.shoppingOrderList=response.data.data[0].shoppingOrderList
               this.orderSn=this.order.orderSn
               this.ctime=this.order.ctime
               this.payTime=response.data.data[0].order.payTime
               console.log(this.order)
             }).catch(function (err) {
                console.log(err)
            });
        }
    }
}
</script>

<style scoped>
.clearfix{
    clear: both;
}
.bod{
    text-align: left;
    width: 100%;
    padding: 15px 0;
    background: #ffffff;
}
.ord_header h1{
    font-size: 15px;
    color: red;
    padding-bottom: 15px;
    padding-left: 15px;
}
.addres{
    color: #949494;
    padding: 0 15px;
}
.addres_header img{
    width: 13px;
    height: 19px;
    vertical-align:middle;
    margin-right: 8px;
}
.addres_header span{
    float:right;
}
.addres_footer{
    
}
.addres_footer span{
   float: left;
   margin-left: 20px;
}
.addres_footer p{
    padding-bottom: 12px;
}
 .data_list{
     width: 100%;
     margin-top: 15px;
     overflow: scroll;
 }
 .red{
	  color: red!important;
  }
.red .icon{
	  display: block!important;
  }
  .fot_le{
      text-align: left;
  }
  .list-li{
      width: 100%;
    height: 5.5rem;
    border-bottom: 1px solid #e5e5e5;
    position: relative;
  }
  .left-img {
    height: 2rem;
    width: 2rem;
    float: left;
    background: #e4fedd;
    margin-top: 1rem;
    margin-right: 0.5rem;
}
.center-info {
    float: left;
}
.title {
    font-size: 0.85rem;
    color: #000000;
    margin-top: 1rem;
}
.num {
    font-size: 12px;
    color: #999999;
    margin-top: 0.25rem;
}
.price {
    font-size: 12px;
    color: #999999;
    margin-top: 0.25rem;
}
.transaction-zt {
    display: inline;
    position: absolute;
    right:30px;
    top: 1rem;
    color: #000000;
}
.right-btngroup {
    display: flex;
    margin-top: 3rem;
    float: right;
}
.r-btn1 {
    border: 1px solid #666666;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    height: 22px;
    border-radius: 5px;
    line-height: 22px;
    text-align: center;
    color: #666666;
    font-size: 12px;
    margin-right: 0.25rem;
}
.r-btn2 {
    border: 1px solid #666666;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    height: 22px;
    border-radius: 3px;
    line-height: 22px;
    text-align: center;
    color: #666666;
    font-size: 12px;
    margin-right: 0.25rem;
}
.r-btn {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    height: 22px;
    border: 1px solid #ff0808;
    border-radius: 5px;
    line-height: 22px;
    text-align: center;
    color: #ff0808;
    font-size: 12px;
}
.ul_li li{
    padding: 0 15px;
    background: #ffffff;
}
.ul_li_head{
    line-height: 45px;
    border-bottom: 1px solid #e5e5e5;
    vertical-align: middlel;
    padding-bottom: 15px;
    padding-top: 15px;
}
.xzicon{
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #a0a0a0;
    float:left;
    margin-right: 15px;
}
.ul_li_head img{
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 5px;
}
.ul_li_head  h1{
    font-size: 13px;
    float: left;
}
.ul_li_head span{
    position: absolute;
    right: 20px;
    color: red;
}
.ul_li_data{
    padding: 15px 0;
    border-bottom: 1px solid #e5e5e5;
}
.ul_li_data_left{
    float: left; 
    padding-right: 15px;
}
.ul_li_data_left img{
    width: 80px;
    height: 80px;
   
}
.ul_li_data_right{
    text-align: left;
}
.ul_li_data_right span:nth-of-type(1){
    color: red;
}
.ul_li_data_right span:nth-of-type(2){
    float:right;
}
.ul_li_data_right p{
    text-align: left;
    position:relative;
    line-height:25px;
    overflow: hidden;
    display: block;
    overflow: scroll;
    text-overflow: ellipsis;
     -webkit-line-clamp: 2;
}
.money{
    border-top: 1px solid #e5e5e5;
}
.money h1{
    font-size: 14px;
    line-height: 44px;
}
.money h1 span{
    float: right;
}
.money h1:nth-of-type(2){
    font-weight: bold;
}
.Subten{
    padding: 15px 0;
    text-align: right;
}
.Subten button{
    width: 72px;
    height: 26px;
    text-align: center;
    padding: 4px;
    box-sizing: border-box;
    margin: 0 5px;
    border-radius: 5px;
}
.Subten button:nth-of-type(2){
    color: red;
    border:1px solid red;
}
.orderdetails ul{
    margin: 15px 0;
    background: #ffffff;
    padding: 10px 0;
}
.orderdetails ul li{
    line-height: 30px;
    padding-left: 15px;
}
.shoptel{
    padding-left: 5px;
    background: #ffffff;
    line-height: 35px;
}

.shoptel img{
   vertical-align: middle;
    height: 24px;

}
.aftersales{
  width: 100%;
  height: 100%;
  position: fixed;
  top:0;
  left: 0;
  background: rgba(0, 0,0,0.5)
}
.aftersales ul{
    position: fixed;
    bottom: 0;
    background: #ffffff;
    width: 100%;
    z-index: 10;
}
.aftersales ul li{
    padding: 15px;
    border-bottom: 1px solid rgba(0, 0,0,0.5);
}
.aftersales ul li img{
    width: 10px;
    height: 15px;
    vertical-align: middle;
    float: right;
}
</style>

